<template>
    <div style="padding: 10px">
        <template v-for="(lab,index) in label">
            <a class="ui label" :class="colorRandom()" @click="labelTo(lab,index)" :style="styleObject" :key="index">{{lab}}</a>
        </template>
    </div>
</template>

<script>
    export default {
        name: "GetLabel",
        data() {
            return {
                label: [
                    'java',
                    'CSS',
                    'Vue',
                    'PHP',
                    '杂项',
                ],
                styleObject: {
                    border: 0,
                    marginTop: this.numRandom(2, 16) + "px",
                }

            }
        },
        created() {
            this.getLabel();
        },

        methods: {
            labelTo(lab, index) {
                console.log(index);
                this.$router.push({name: 'classify', params: {sortName: lab, labelId: index}});

                $('.sidebar')
                    .sidebar('setting', 'transition', 'push')
                    .sidebar('hide');
            },

            numRandom(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },

            colorRandom() {
                let labelColor = [
                    'red',
                    'orange',
                    'yellow',
                    'olive',
                    'green',
                    'teal',
                    'blue',
                    'violet',
                    'purple',
                    'pink',
                    'brown',
                    'grey',
                    'black'
                ];

                return labelColor[Math.floor(Math.random() * 10)];
            },

            getLabel() {
                this.req.get('label')
                    .then(res => {
                        this.label = res.data;
                    })
                    .catch(error => {
                        console.log('getLabel() in GetLabel error' + error)
                    })
            }


            //method结束------------------
        }
    }

</script>

<style scoped>

</style>
